<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

 <script> 
	$(function() {
		$("#btnPostWebboard").click(function(){
			var topicName = $("#txtTopicName").val();
			var content = $("#txtPostDetail").val();
			var postBy = $("#txtOwnName").val();
			if(topicName === ''){
				$.alert('โปรดระบุหัวข้อกระทู้');
				return false;
			}
			if(content === ''){
				$.alert('โปรดระบุเนื้อหากระทู้');
				return false;
			}
			if(postBy === ''){
				$.alert('โปรดระบุชื่อผู้โพสต์');
				return false;
			}
			$.ajax({
				method: "POST",
				url: '${pageContext.request.contextPath}/webboard/postWebboard',
				data: { topicName: topicName, content: content, postBy:  postBy},
				success : function(data) {
				    window.location.reload(true);
				}
			});
		});
	});
// 	$(function() {

// 		$('.carousel').carousel({
// 			auto : false,
// 			period : 3000,
// 			duration : 2000,
// 			markers : {
// 				type : "default"
// 			}
// 		});
		
// 		$("a").click(function(){
// 			$(".loader").fadeOut("slow");
// 		});
// 	});
 </script> 
 <style> 
/* .carousel-layout { */
/* 	width: 99%; */
/* 	float: none; */
/* 	text-align: center; */
/* } */
/* .button-fixed-bottom-right{ */
/* 	position: absolute;  */
/* 	bottom: 5px;  */
/* 	right: 5px;  */
/* 	margin: 5px; */
/* } */

/* div.panel-content div.content{ */
/* 	border-bottom: solid 1px #ececec; */
/* 	width: 98%; */
/* 	line-height: 25px; */
/* } */
 </style> 

	<c:if test="${masterConfig.value eq 'Y' and fn:length(slidepicture) > 0}">
            <div class="slide-box">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner" role="listbox">
                     	<c:forEach items="${slidepicture}" varStatus="s" var="x"> 
                     	<c:choose>
                     		<c:when test="${s.index eq 0}">
                     			<div class="item active">
                            		<img data-src="holder.js/900x300/auto/#777:#555/text:First slide" style="height: 250px; width: 100%;"  src="data:image/png;base64,${x.strPicture}" data-holder-rendered="true">
                        		</div>
                     		</c:when>
                     		<c:otherwise>
                     			<div class="item">
                            		<img data-src="holder.js/900x300/auto/#777:#555/text:First slide" style="height: 250px; width: 100%;"  src="data:image/png;base64,${x.strPicture}" data-holder-rendered="true">
                        		</div>
                     		</c:otherwise>
                     	</c:choose>
                        
                        </c:forEach>
                    </div>
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
	</c:if>
	
   	<c:forEach items="${activemenus}" var="x" varStatus="i">
   		<c:if test="${x.nameEn eq 'news'}">
            <div class="panel-box">
                <div class=titlebar>
                    <span class="glyphicon glyphicon-list-alt"></span> ข่าวประชาสัมพันธ์
                    <a class="read-more" href="${pageContext.request.contextPath}/news">
                        ดูทั้งหมด
                    </a>
                </div>
                <div class="panel-body">
                    <ul>
                    	<c:set var="now" value="<%=new java.util.Date()%>"/>
                    	
                    	<c:forEach items="${lastestNews}" var="x">
                    	
                    	<c:set var="newDate" value="${x.createdDate.time + (60*60*164*1000) }"/>
                    	<c:set var="nowDate" value="${now.time}"/>
                    	
                    	<jsp:useBean id="newDateBean" class="java.util.Date"/>
						<c:set target="${newDateBean}" property="time" value="${newDate}"/>
						
						<jsp:useBean id="nowDateBean" class="java.util.Date"/>
						<c:set target="${nowDateBean}" property="time" value="${nowDate}"/>
						
                        <li>
                            <a href="${pageContext.request.contextPath}/news/${x.id}">
                            	${x.name}
                            	<c:if test="${nowDateBean <= newDateBean}">
								 <img src="${pageContext.request.contextPath}/images/new_icon.gif"/>
							</c:if>
                            </a>
                        </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
		</c:if>
   		<c:if test="${x.nameEn eq 'webboard'}">
            <div class="panel-box">
               <div class=titlebar>
                   <span class="glyphicon glyphicon-th-list"></span> เว็บบอร์ด
                   <a class="read-more" href="${pageContext.request.contextPath}/webboard">
                     	  ดูทั้งหมด
                   </a>
               </div>
               <script>
               	$(function(){
               		
               		$('#tblWebboard').dataTable({
               			 	"paging":   false,
					        "ordering": false,
					        "info":     false,
					        "searching":false
               		});
               	
               		var dialog = $("#dialog-form").dialog({
			               			autoOpen:false,
			               		 	height: 420,
							      	width: 530,
							     	modal: true
				     			 });
               		
				    $( "#create-topic-button" ).click(function() {
					   dialog.dialog( "open" );
					});
               	});
               </script>
               <div class="panel-body">
	               <button class="btn btn-sm btn-default pull-right" data-toggle="modal" data-target="#createPostDlg"><span class="glyphicon glyphicon-comment"></span> <b>ตั้งกระทู้</b></button>
	     		   <div style="width:10px;">&nbsp</div>
	     		   <div style="width:10px;">&nbsp</div>
                   <table id="tblWebboard" class="table table-striped table-bordered">
                   	<thead>
                   		<tr>
                   			<th width="5%">ลำดับ</th>
                   			<th width="">หัวข้อเรื่อง</th>
                   			<th width="5%">ดู</th>
                   			<th width="5%">ตอบ</th>
                   			<th width="15%">เขียนโดย</th>
                   			<th width="20%">วันเวลา</th>
                   		</tr>
                   	</thead>
                   	<tbody>
                   	<c:if test="${not empty WEBBOARDALLDATA}">
        				<c:forEach items="${WEBBOARDALLDATA}" varStatus="i" var="x">
	                   		<tr>
	                   			<td>${i.index+1}</td>
	                   			<td class="text-left">
	                   				<a href="${pageContext.request.contextPath}/webboard/${x.id}">${x.name}</a>
							        <fmt:formatDate type="date" value="${now}" var="nowDate" />
	                   				<fmt:formatDate type="date" value="${x.createdDate}" var="createDate" />
									<c:if test="${createDate >= nowDate or fn:length(x.listWebboardReply) < 1}">
									    <img src="${pageContext.request.contextPath}/images/new_icon.gif"/>
									</c:if>
	                   			</td>
	                   			<td>${x.viewed}</td>
	                   			<td>${fn:length(x.listWebboardReply)}</td>
	                   			<td class="text-left">${x.createdBy}</td>
	                   			<td class="text-left"><fmt:formatDate pattern="yyyy-MM-dd" value="${x.createdDate}" /> <fmt:formatDate pattern="HH:mm:ss" value="${x.createdDate}" /></td>
	                   		</tr>
                   		</c:forEach>
            		</c:if>
                   	</tbody>
                   </table>
               </div>
           </div>
		</c:if>
   		<c:if test="${x.nameEn eq 'download'}">
            <div class="panel-box">
                <div class=titlebar>
                    <span class="glyphicon glyphicon-download-alt"></span> ดาวน์โหลด
                    <a class="read-more" href="${pageContext.request.contextPath}/download">
                        ดูทั้งหมด
                    </a>
                </div>
                <div class="panel-body">
                    <ul>
                     	<c:forEach items="${lastestDownloads}" var="x">
                        <li>
                            <a href="${pageContext.request.contextPath}/download/getFile/${x.fileName}">${x.name}</a>
                        </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
		</c:if>
   		<c:if test="${x.nameEn eq 'programs'}">
            <div class="panel-box">
                <div class=titlebar>
                    <span class="glyphicon glyphicon-modal-window"></span> โปรแกรมที่เกี่ยวข้อง
                    <a class="read-more" href="${pageContext.request.contextPath}/programs">
                        ดูทั้งหมด
                    </a>
                </div>
                <div class="panel-body">
                    <ul>
                    	<c:forEach items="${lastestPrograms}" var="x">
                        <li>
                            <a href="${x.url}" target="_blank">${x.name}</a>
                        </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
		</c:if>
   		<c:if test="${x.nameEn eq 'websites'}">
            <div class="panel-box">
                <div class=titlebar>
                    <span class="glyphicon glyphicon-link"></span> เว็บไซต์ที่เกี่ยวข้อง
                    <a class="read-more" href="${pageContext.request.contextPath}/websites">
                        ดูทั้งหมด
                    </a>
                </div>
                <div class="panel-body">
                    <ul>
                        <c:forEach items="${lastestWebs}" var="x">
                        <li>
                            <a href="${x.url}" target="_blank">${x.name}</a>
                        </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
            <div class="panel-box panel-column">
                <div class="panel-body">&nbsp;</div>
            </div>
		</c:if>
	</c:forEach>
		
<div class="modal fade" id="createPostDlg" tabindex="-1" role="dialog"  aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">ตั้งหัวข้อกระทู้</h4>
      </div>
      <div class="modal-body">
	        <form>
		 	  <div class="form-group">
			      <label for="txtTopicName">หัวข้อกระทู้ : </label>
			      <input type="text" name="txtTopicName" id="txtTopicName" class="form-control">
		      </div>
		      <div class="form-group">
			      <label for="txtPostDetail">หัวข้อกระทู้ : </label>
			      <textarea rows="5" name="txtPostDetail" id="txtPostDetail" class="form-control"></textarea>
		      </div>
		      <div class="form-group">
			      <label for="txtOwnName">ชื่อผู้โพส : </label>
			      <input type="text" name="txtOwnName" id="txtOwnName" class="form-control">
		      </div>
		  </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default">ล้างข้อมูล</button>
        <button type="button" id="btnPostWebboard" class="btn btn-primary">ตั้งกระทู้</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->